import { getLogs } from '@/services/ant-design-pro/api';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { PageContainer, ProTable } from '@ant-design/pro-components';
import { useIntl } from '@umijs/max';
import React, { useRef } from 'react';

const RoleList: React.FC = () => {
  /**
   * @en-US International configuration
   * @zh-CN 国际化配置
   * */
  const intl = useIntl();

  const actionRef = useRef<ActionType>();

  const columns: ProColumns<API.LogItem>[] = [
    { title: '用户名', dataIndex: 'name' },
    { title: '操作', dataIndex: 'operate' },
    { title: '时间', dataIndex: 'time', hideInSearch: true },
    { title: '操作内容', dataIndex: 'data', hideInSearch: true },
    {
      title: '操作时间区间',
      valueType: 'dateTimeRange',
      search: {
        transform: (value: any) => ({
          beginTime: value[0],
          endTime: value[1],
        }),
      },
      hideInTable: true,
    },
  ];

  return (
    <PageContainer>
      <ProTable<API.LogItem>
        headerTitle="查询后台日志"
        actionRef={actionRef}
        rowKey="id"
        request={getLogs}
        columns={columns}
        search={{ labelWidth: 'auto' }}
      />
    </PageContainer>
  );
};

export default RoleList;
